<template>
  <!--订单选择-->
  <a-modal
    title="投料计划单"
    :visible.sync="feedShow"
    @ok="addPPRelationOk"
    :confirm-loading="confirmLoading"
    @cancel="handleCancel"
    width="80%"
    class="procedure-modal"
  >
    <div class="operation-search">
      <a-form layout="inline" :form="searchItem">
        <a-form-item label="制单日期：">
          <a-range-picker
            format="YYYY-MM-DD"
            :default-value="defaulttimeList"
            @change="onTime"
            v-model="defaulttimeList"
          >
            <template slot="dateRender" slot-scope="current">
              <div class="ant-calendar-date" :style="getcurrentStyle(current)">
                {{ current.date() }}
              </div>
            </template>
          </a-range-picker>
        </a-form-item>
        <a-form-item label="车间：">
          <a-select
            :allowClear="true"
            mode="multiple"
            :maxTagCount="1"
            class="selectwidth"
            v-model="searchItem.WSType"
            placeholder="请选择"
          >
            <a-select-option
              v-for="item in WSTypeList"
              :key="item.type"
              :value="item.type"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="投料单号：">
          <a-input
            :allowClear="true"
            placeholder="请输入"
            v-model="searchItem.planNo"
          />
        </a-form-item>

        <a-form-item>
          <a-button class="default-button" @click="GetPackingPlansListFun">
            查询
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div style="height: 400px">
      <a-table
        :columns="orderColums"
        :row-key="(record) => record.num"
        :data-source="orderList"
        :row-selection="{
          selectedRowKeys: expandedRowKeys,
          selectedRows: expandedRow,
          onChange: onSelectChange,
        }"
        :loading="loading1"
        :pagination="false"
        :scroll="{ x: 700, y: 350 }"
        size="middle"
      >
      </a-table>
    </div>
    <a-pagination
      show-size-changer
      :default-current="1"
      :pageSizeOptions="pageSizeOptions"
      :total="orderListTotal"
      :pageSize="searchItem.pageRequestModel.pageSize"
      @change="procedureChange"
      @showSizeChange="onShowSizeChange"
    />
  </a-modal>
</template>

<script>
import { debounce } from "@/common/debounce";
import { GetWorkShopTypes } from "@/api/WorkShopType/index";
import { getPreparationPlanData } from "@/api/SemiMGoodsDistributeDetail/index";
const orderColums = [
  {
    title: "序号",
    dataIndex: "num",
    fixed: "left",
    width: 50,
    align: "center",
  },
  {
    title: "投料单号",
    dataIndex: "PlanNo",
    sorter: true,
    fixed: "left",
    width: 150,
    align: "center",
  },
  {
    title: "生产批号",
    dataIndex: "BatchNo",
    align: "center",
    ellipsis: true,
    width: 200,
  },
  {
    title: "产品编码",
    dataIndex: "MaterialCode",
    align: "center",
    ellipsis: true,
    width: 200,
  },
  {
    title: "产品名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: 360,
  },
  {
    title: "计划生产日期",
    dataIndex: "PlanDt",
    align: "center",
    ellipsis: true,
    width: 200,
  },
  {
    title: "灌装单需求量",
    dataIndex: "ReqQty",
    align: "center",
  },
  {
    title: "计划数量",
    dataIndex: "PlannedQuantity",
    align: "center",
  },
];
export default {
  props: {
    feedShow: {
      type: Boolean,
      default: false,
    },
    packingPlanID: {
      type: String,
      default: "",
    },
  },
  model: {
    prop: "feedShow",
    event: "close",
  },
  data() {
    return {
      confirmLoading: false, //modal的loading
      defaulttimeList: [], //默认时间
      expandedRowKeys: [],
      expandedRow: [],
      searchItem: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        planNo: null,
        packingPlanID: null,
      }, //搜索参数
      orderColums,

      DicStatus: [
        {
          type: 0,
          name: "初始",
        },
        {
          type: 2,
          name: "已下发",
        },
        {
          type: 3,
          name: "开始生产",
        },
        {
          type: 5,
          name: "结束生产",
        },
      ], //订单状态
      orderList: [],
      orderListTotal: 0,
      pageSizeOptions: ["30", "50", "100", "200", "500", "1000"], //分页
      loading1: false,
    };
  },
  methods: {
    //时间选择
    onTime(e, e1) {
      let that = this;
      that.searchItem.StartDt = that.dateExt.showDate(e[0]._d);
      that.searchItem.EndDt = that.dateExt.showDate(e[1]._d);
    },

    //时间选择器的样式填充
    getcurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },

    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
      this.expandedRowKeys = selectedRowKeys;
      this.expandedRow = selectedRows;
    },

    //切换页数
    procedureChange(page, pageSize) {
      this.searchItem.pageRequestModel.pageIndex = page;
      this.searchItem.pageRequestModel.pageSize = pageSize;
      this.GetPackingPlansListFun();
    },
    //切换条数
    onShowSizeChange(current, size) {
      this.searchItem.pageRequestModel.pageIndex = current;
      this.searchItem.pageRequestModel.pageSize = size;
      this.GetPackingPlansListFun();
    },
    //获取厂区列表
    async GetWorkShopTypesAllFun() {
      let that = this;

      let res = await GetWorkShopTypes({ segmentType: 0 });
      if (res.Status == 10000) {
        let wtList = [];
        res.Data.map((item) => {
          wtList.push({ type: item.WSType, name: item.WSName });
        });
        that.WSTypeList = wtList;
      } else {
        that.$message.error(res.Message);
      }
    },
    //获取单据列表
    GetPackingPlansListFun: debounce(async function () {
      let that = this;
      that.loading1 = true;
      that.expandedRowKeys = [];
      that.expandedRow = [];
      that.searchItem.packingPlanID = that.packingPlanID;
      let res = await getPreparationPlanData(that.searchItem);
      if (res.Status == 10000) {
        let { pageIndex, pageSize } = that.searchItem.pageRequestModel;
        res.Data.Data.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.PlanDt = that.dateExt.showDate(item.PlanDt);
        });
        that.orderList = res.Data.Data;
        that.orderListTotal = res.Data.TotalNumber;
      } else {
        that.$message.error(res.Message);
      }
      that.loading1 = false;
    }),

    //确认
    addPPRelationOk() {
      if (this.expandedRow.length === 0)
        return this.$message.error("请先选择一项再确认");
      this.$emit("up-data", {
        expandedRowKeys: this.expandedRowKeys,
        expandedRow: this.expandedRow,
      });
      this.handleCancel();
    },

    //关闭弹窗
    handleCancel() {
      this.expandedRowKeys = [];
      this.expandedRow = [];
      this.$emit("close", false);
    },
    //确认添加/修改
    handleOk() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
        }
      });
    },
    //表格选择
    handleTableChange() {},
  },
  created() {},
  watch: {
    feedShow: {
      handler(newV, oldV) {
        if (newV) {
          let that = this;
          that.searchItem.packingPlanID = that.packingPlanID;
          that.searchItem.StartDt = that.dateExt.getDay(-30);
          that.defaulttimeList[0] = that.searchItem.StartDt;
          that.searchItem.EndDt = that.dateExt.getDay(0);
          that.defaulttimeList[1] = that.searchItem.EndDt;
          that.GetPackingPlansListFun();
          that.GetWorkShopTypesAllFun();
        }
      },
      immediate: true, // 重点
      deep: true, // 重点
    },
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    height: 1000px;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .searchrow {
    display: flex;
    justify-content: flex-end;
    padding: 2px;
  }
  .operation-search {
    display: flex;
    //justify-content: flex-end;
    border-bottom: 2px solid #f0f2f5;
    //margin-bottom: 0.9375rem;
    .selectwidth {
      width: 15rem;
    }
    .selectrightwidth {
      width: 7rem;
    }
  }
}
/deep/.ant-table-body {
  &::-webkit-scrollbar {
    margin: 0.2rem;
    //整体样式
    height: 0.4125rem;
    width: 0.3rem;
  }

  &::-webkit-scrollbar-thumb {
    //滑动滑块条样式
    border-radius: 0.625rem;
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
    background: #009a9a;
    // background: rgba(2, 35, 60, 1);
  }

  &::-webkit-scrollbar-track {
    //轨道的样式
    -webkit-box-shadow: 0;
    border-radius: 0.625rem;
    background: #ccc;
  }

  &::-webkit-scrollbar-corner {
    background: red;
  }
}
</style>
